<template>
    <div>
        <el-dialog
            :center="true"
            title="钉钉机器人推送设置"
            :visible.sync="showrobot"
            :close-on-click-modal="false"
            :before-close="handleClose"
            width="1100px">
            <div class="t_robot_tips">
                <div style="padding: 10px 0;">
                    该功能可以实时提醒新的任务或者任务进展，消息通过钉钉聊天的方式由机器人推送到群内，让您不必反复查看工单进展。
                </div>
                <!-- <el-button type="text"  >机器人配置帮助</el-button> -->
            </div>
            <el-table
            :data="tableData"
            :header-cell-style="{ 
            background:'#F4F4F4',
            color:'#7D8087'}"
            style="width: 100%;margin-top:30px">
                <el-table-column
                    align="center"
                    prop="date"
                    label="启用推送开关">
                    <template slot-scope="scope">
                        <el-switch
                        @change="changesw($event,scope.$index)"
                        :active-value=1
                        :inactive-value=0
                        v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="text"
                    label="推送条件">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="配置要推送的钉钉群机器人">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="text"
                        @click="handleEdit(scope.row.type)">配置</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" round @click="update" >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 配置 -->
        <el-dialog
            :center="true"
            title="配置机器人"
            :visible.sync="showedit"
            :close-on-click-modal="false"
            width="500px">
            <el-input class="t_input" v-model.trim="peizhiform.name" placeholder="请输入机器人webhook地址"></el-input>
            
            <span slot="footer" class="dialog-footer">
                <el-button type="danger" round @click="upchange" >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
  import axios from "axios";

  export default {
    
    name: 'robot',
    props:['showrobot','robottype'],
    data() {
      return {
        tableData: [],
        showedit:false,
        changeid:'',
        peizhiform:{
            name:''
        },
        tsarr:[
            {
                type:1,
                status:0,
                text:'当出现代理商订单投诉时通知',
                webhook:''
            },
            {
                type:2,
                status:0,
                text:'工单处理完成通知',
                webhook:''
            },
            {
                type:3,
                status:0,
                text:'有新的投诉工单通知',
                webhook:''
            },
            {
                type:4,
                status:0,
                text:'投诉工单重启（分销商订单）',
                webhook:''
            },
            {
                type:5,
                status:0,
                text:'投诉工单重启（自己发展订单）',
                webhook:''
            },
        ]
      }
    },
    mounted() {
        //获取初始状态
        this.getlist()
        
    },
    methods:{
        //获取初始状态
        getlist(){
            axios.get('/api/plan-market/message/ding/list')
          .then(response => {
              if (response.data.msg.code == 0) {
                  console.log('获取初始状态')
                  console.log(response.data.data)
                    //   投诉进机器人
                  if(this.robottype=='ts'){
                    for(var x = 0;x<response.data.data.length;x++){
                        for(var y = 0;y<this.tsarr.length;y++){
                            if(response.data.data[x].type==this.tsarr[y].type){
                                this.tsarr[y].status = response.data.data[x].status
                                this.tsarr[y].webhook = response.data.data[x].webhook
                            }
                        }
                    }   
                    this.tableData = this.tsarr
                  }
                 
              } else {
                  this.$message.error(response.data.msg.info);
              }
          })
        },
        update(){
            this.$emit('update')
        },
        handleClose(){
            this.$emit('closerobot')
        },
        changesw($event,index){
            console.log($event,index)
            if($event==1){
                if(this.tableData[index].webhook==''){
                    this.tableData[index].status = 0
                    this.$message.error('请先配置机器人');
                    return
                }
            }
            axios.post('/api/plan-market/message/ding/status',{
                type:this.tableData[index].type,
                status:$event
            })
            .then(response => {
                if (response.data.msg.code == 0) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    //获取初始状态
                    this.getlist()
                } else {
                    this.$message.error(response.data.msg.info);
                }
            })
        },
        //打开配置
        handleEdit(type){
            this.changeid = type
            this.showedit = true
            for(var x=0;x<this.tableData.length;x++){
                if(this.tableData[x].type==type){
                    this.peizhiform.name=this.tableData[x].webhook
                }
            }
        },
        //提交配置
        upchange(){
            
            axios.post('/api/plan-market/message/ding/edit',{
                type:this.changeid,
                webhook:this.peizhiform.name
            })
            .then(response => {
                if (response.data.msg.code == 0) {
                    this.$message({
                        message: '编辑成功',
                        type: 'success'
                    });
                    this.showedit = false
                    //获取初始状态
                    this.getlist()
                } else {
                    this.$message.error(response.data.msg.info);
                }
            })
        }
    }
  }
</script>

<style  scoped>
 .t_robot_tips{
    background-color: #E9F4FF;
    color: #607E9B;
    display: flex;
    justify-content: space-between;
    padding:0 10px;
    align-items: center;
 }
 /deep/.t_input .el-input__inner{
    background-color: #F7F8FA;
    border: none;
 }
</style>